.font-family {
  @include font-family;
}
// 颜色
@each $colorKey, $color in $colors {
  //字体颜色   .text-#{'' + $colorKey}用于解决警告，添加‘’强制转换为字符串
  .text-#{"" + $colorKey} {
    color: $color;
  }
  //背景颜色    .bg-#{'' + $colorKey}用于解决警告，添加‘’强制转换为字符串
  .bg-#{"" + $colorKey} {
    background-color: $color;
  }
}

//字体大小
@each $fontKey, $font in $fonts {
  .font-#{$fontKey} {
    font-size: $font;
  }
}
// 文字溢出隐藏显示...
//1-4行
@for $i from 1 through 4 {
  @if $i == 1 {
    .line-ellipsis {
      @include text-overflow($i);
    }
  } @else {
    .line-limited#{$i} {
      @include text-overflow($i);
    }
  }
}

//border
//颜色边框,.border-#{''+$borderKey} 用于解决警告，添加''强制转换为字符串
@each $borderKey, $border in $colors {
  .border-#{"" + $borderKey} {
    @include border($border);
  }
}
//边框粗细
@for $i from 1 through 5 {
  @if $i == 1 {
    .border {
      @include border;
    }
  } @else {
    .border#{$i} {
      @include border($border-color, px($i));
    }
  }
}
//边框方向
@each $i in left, right, top, bottom {
  .border-#{$i} {
    @include border-dir($i);
  }
}

// border-radius
@each $radiusKey, $radiu in $radius {
  .border-radius-#{$radiusKey} {
    @include radius($radiu);
  }
}

// 定位
@each $positionKey, $position in $positions {
  .position-#{$positionKey} {
    position: $position;
  }
}

// 文字对齐
@each $textAlignKey, $textAlign in $textAligns {
  .text-#{$textAlignKey} {
    text-align: $textAlign;
  }
}

//浮动
@each $floatKey, $float in $floats {
  .float-#{$floatKey} {
    float: $float;
  }
}

//清除浮动
.clearfix {
  zoom: 1;
  &:after {
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }
}

//间距
@each $sizeKey, $size in $sizes {
  .p-#{$sizeKey} {
    @include padding-col($size, $sizeKey);
    @include padding-row($size, $sizeKey);
  }

  .px-#{$sizeKey} {
    @include padding-row($size, $sizeKey);
  }

  .py-#{$sizeKey} {
    @include padding-col($size, $sizeKey);
  }

  .pl-#{$sizeKey} {
    @if $sizeKey == "zero" {
      padding-left: $size !important;
    } @else {
      padding-left: $size;
    }
  }

  .pr-#{$sizeKey} {
    @if $sizeKey == "zero" {
      padding-right: $size !important;
    } @else {
      padding-right: $size;
    }
  }

  .pt-#{$sizeKey} {
    @if $sizeKey == "zero" {
      padding-top: $size !important;
    } @else {
      padding-top: $size;
    }
  }

  .pb-#{$sizeKey} {
    @if $sizeKey == "zero" {
      padding-bottom: $size !important;
    } @else {
      padding-bottom: $size;
    }
  }

  .m-#{$sizeKey} {
    @include margin-col($size, $sizeKey);
    @include margin-row($size, $sizeKey);
  }

  .mx-#{$sizeKey} {
    @include margin-row($size, $sizeKey);
  }

  .my-#{$sizeKey} {
    @include margin-col($size, $sizeKey);
  }

  .ml-#{$sizeKey} {
    @if $sizeKey == "zero" {
      margin-left: $size !important;
    } @else {
      margin-left: $size;
    }
  }

  .mr-#{$sizeKey} {
    @if $sizeKey == "zero" {
      margin-right: $size !important;
    } @else {
      margin-right: $size;
    }
  }

  .mt-#{$sizeKey} {
    @if $sizeKey == "zero" {
      margin-top: $size !important;
    } @else {
      margin-top: $size;
    }
  }

  .mb-#{$sizeKey} {
    @if $sizeKey == "zero" {
      margin-bottom: $size !important;
    } @else {
      margin-bottom: $size;
    }
  }
}

/* 弹性盒布局 */
.flex-row {
  display: flex;
}
.flex-row-vcenter {
  display: flex;
  align-items: center;
} /* 垂直居中对齐 */
.flex-row-rcenter {
  display: flex;
  justify-content: center;
} /* 水平居中对齐 */
.flex-row-c {
  display: flex;
  align-items: center;
  justify-content: center;
} /* 水平垂直居中对齐 */
.flex-row-bw {
  display: flex;
  justify-content: space-between;
}
.flex-row-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.flex-row-ad {
  display: flex;
  justify-content: space-around;
}
.flex-wrap {
  flex-wrap: wrap;
} /* 换行，默认nowrap（不换行）*/
.flex-shrink {
  flex-shrink: 0;
}

.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-col-vcenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 纵向布局垂直居中 */
.flex-col-rcenter {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 纵向布局水平居中对齐 */
.flex-col-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flex-col-bw {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flex1 {
  flex: 1;
}

/* 相对定位 */
.pr {
  position: relative;
}

/*浮动*/
.fl {
  float: left;
}

.fr {
  float: right;
}
/* 清除浮动 */
.clearfix {
  zoom: 1;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
  overflow: hidden;
}
// 鼠标显示小手
.cursor {
  cursor: pointer;
}
.font25 {
  font-size: 25px !important;
}

.w100 {
  width: 100%;
}
